<template>
  <div class="class-main">
    <el-card class="card">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="search.title" size="small" placeholder="文章名称模糊查询" />
        </el-col>
        <el-col :span="4">
          <el-input v-model="search.author" size="small" placeholder="作者" />
        </el-col>
        <el-col :span="6" :offset="8">
          <el-button type="primary" size="small" @click="doSearch">搜索</el-button>
          <el-button type="default" size="small" @click="doReset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="content">
      <el-card class="card">
        <div slot="header">
          <el-button type="primary" @click="goAdd">新增</el-button>
        </div>
        <Pagination :page="page" align="right" />
        <el-table :data="articleList" border stripe>
          <el-table-column fixed type="index" label="#" :width="50" />
          <el-table-column prop="title" label="文章标题" :width="300" />
          <el-table-column prop="author" label="作者" :width="100" />
          <el-table-column prop="desc" label="文章描述" :width="300" />
          <el-table-column prop="desc" label="封面图片" :width="300">
            <template slot-scope="scope">
              <img class="cover-img" :src="scope.row.cover" alt="">
            </template>
          </el-table-column>
          <el-table-column label="是否最热" :width="100">
            <template slot-scope="scope">
              {{ scope.row.hot=="0"?'否':'热门' }}
            </template>
          </el-table-column>
          <el-table-column label="阅读量/赞" :width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.viewCount+' / '+scope.row.zanCount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="添加时间" :width="200" />
          <el-table-column fixed="right" label="操作" :width="300">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="goEdit(scope.row.id)">编辑</el-button>
              <el-button type="default" size="mini" @click="goView(scope.row.id)">查看</el-button>
              <el-button type="danger" size="mini" @click="goDel(scope.row.id)">删除</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <Detail ref="detail" />
  </div>
</template>

<script>
import articleApi from '@/api/content/article'
import Pagination from '@/components/common/Pagination'
import pageMixin from '@/mixins/pageMixin'
import Detail from './detail'
import { resetData } from '@/utils/index'
import _ from 'lodash'
export default {
  name: 'Article',
  components: {
    Pagination,
    Detail
  },
  mixins: [pageMixin],
  data() {
    return {
      loading: false,
      dialog: false,
      search: {},
      articleList: []
    }
  },
  created() {
    this.getArticleList()
  },
  methods: {
    doSearch() {
      resetData(this, 'page')
      this.getArticleList()
    },
    doReset() {
      resetData(this, 'search')
      this.doSearch()
    },
    getArticleList() {
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search
      }
      // 过滤无效参数
      params = _.pickBy(params, item => item)
      articleApi.getArticleList(params).then(({ data }) => {
        this.articleList = data.list
        this.page.start = data.pageNumber
        this.page.limit = data.pageSize
        this.page.total = data.totalRow
      })
    },
    goAdd() {
      this.$refs.detail.openDialog()
    },
    goEdit(id) {
      this.$refs.detail.openDialog(id)
    },
    goView() {

    },
    goDel(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        articleApi.delArticle({
          id
        }).then(res => {
          if (res.code) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getArticleList()
          } else {
            this.$message.error('删除失败!')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.class-main {
  .card {
    margin: 30px;
    box-sizing: border-box;
  }
  .content {
      .cover-img{
          width: 100px;
          height: 40px;
          object-fit: contain;
      }
  }
}
</style>
